<template>
  <div class="jidi">
    <div class="title2">
      <div>【示范基地申报详情】</div>
      <div v-if="type==0" style="color: #1CA9FF;">当前申报状态:待审核</div>
      <div v-if="type==1" style="color: blue;">当前申报状态:已通过</div>
      <div v-if="type==2" style="color: red;">当前申报状态:已驳回</div>
      <div v-if="type==3" style="color: green;">当前申报状态:审核中</div>
      <div v-if="type==4" style="color: #A5A9AF;">当前申报状态:草稿</div>
      <div v-if="level==0">申报级别:国家级</div>
      <div v-if="level==1">申报级别:省级</div>
      <div v-if="level==2">申报级别:市级</div>
      </div>
    <el-table :data="huixian" class="my-table" border style="width: 100%;">
          <el-table-column width="60px" align="center" label="序号" type="index"
            :label-class-name="'table-header'"></el-table-column>
          <el-table-column align="center" width="300px" label="资料名称" prop="name" :label-class-name="'table-header'">
            <template slot-scope="scope">
              <!-- <span style="color: red;" v-if="scope.$index==8">*</span> -->
            <span v-if="type=='1'&& scope.$index!==8" style="color: red;">*</span>

              <span class="name">{{scope.row.dataName |flitt() }}</span>
            </template>
          </el-table-column>
         
          <el-table-column align="center" label="资料上传" :label-class-name="'table-header'">
          <template slot-scope="{row}">
            <el-upload class="upload-demo" v-if="type==2||type==4" :action="https+'zxqyfw/pub/fileUploadRecord/upload'"
              :on-preview="handlePreview" :data="uploadfile(row.name, '资料上传')" :headers="{ Authorization: token }"
              :before-upload="beforelod"
              :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '资料上传') }"
              :on-remove="(file, fileList) => handleRemove(file, fileList, row, 1)" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
              :accept="'.pdf'" :file-list="row.fileNameList">
              <el-icon class="iconDownload1" name="upload2"></el-icon>
              <span class="text1">上传文件</span>
            </el-upload>
            <div v-if="type==1||type==0">
            <p v-for="(item, index) in row.fileNameList" :key="index" style="cursor: pointer;" @click="handlePreview(item)">{{ item.fileName }}</p>
           </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="辅助证明文件上传" :label-class-name="'table-header'">
          <template slot-scope="{row}">
            <el-upload class="upload-demo" v-if="type==2||type==4" :action="https+'zxqyfw/pub/fileUploadRecord/upload'"
              :on-preview="handlePreview" :data="uploadfile(row.name, '辅助证明文件上传')" :headers="{ Authorization: token }"
              :before-upload="beforelod"
              :on-success="(response, file, fileList) => { return handleSuccess(response, file, fileList, row, row.name, '辅助证明文件上传') }"
              :on-remove="(file, fileList) => handleRemove(file, fileList, row, 2)" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
              :accept="'.pdf'" :file-list="row.axioyNameList">
              <el-icon class="iconDownload1" name="upload2"></el-icon>
              <span class="text1">上传文件</span>
            </el-upload>
            <div v-if="type==1||type==0">
            <p v-for="(item, index) in row.axioyNameList" :key="index" style="cursor: pointer;" @click="handlePreview(item)">{{ item.fileName }}</p>
           </div>
          </template>
        </el-table-column>
          <el-table-column width="150" align="center" label="审核状态" prop="status" :label-class-name="'table-header'">
            <template slot-scope="scope">
            <span class="status">{{ scope.row.pprovalStatus === 0 ? '待审核' : scope.row.pprovalStatus === 1 ? '已通过' : scope.row.pprovalStatus === 2 ? '已驳回' : '' }}</span>
            <p class="yijian" v-if="type==1||type==2" @click="open('审批意见',scope.row.approvalOpinion)">审批意见</p>
          </template>
          </el-table-column>
        </el-table>
        <div class="title2">
        【附件说明】
      </div>
      <div class="fujian">
        兰州市工业和信息化委员会关于印发兰州中小企业公共服务示范平台认定和管理办法的通知.pdf
      </div>
      <div class="fujian">
        兰州市工业和信息化委员会关于做好2019年兰州市中小企业公共服务示范平台申报工作的通知.pdf
      </div>
      <!-- 相关联系人 -->
      <div class="title2">
        【相关联系科室】
      </div>
      <div class="lianxi">
        <div>兰州市中小企业公共服务平台</div>
        <div>双创科</div>
        <div>8593143</div>
      </div>
      <div class="tableFoot">
        <button v-if="type==2" @click="submit(4)">保存</button>
      <button v-if="type==4" @click="submit(4)">保存</button>
      <button v-if="type==2" @click="submit(0)">提交</button>
      <button v-if="type==4" @click="submit(0)">提交</button>
      </div>
  </div>
</template>

<script>

import {jidi_reset, download, moban_list, upload_file ,shifan_detail, getFileName, pingtai_Count,repeal} from '../../api/api'
import { http } from '@/until/http';
export default {
  data() {
    return {
      https:http,
      uploadData: {

      },
      resData: {},
      fileList: [],
      response: '',
      token: '',
      upload: {
        "userId": this.$store.state.userId,
        "level":localStorage.getItem('area'),
        "applicationType":localStorage.getItem('type'),
        "dataType": 0,
        "file1": { "1,申请报告_资料上传": [] },
        "file2": { "1,申请报告_辅助证明文件上传": [] },
        "file3": { "2,创业创新基地主要从业人员情况表_资料上传": [] },
        "file4": { "2,创业创新基地主要从业人员情况表_辅助证明文件上传": [] },
        "file5": { "3,申报主体要确保申报材料真实性、完整性，填报申报材料真实性声明_资料上传": [] },
        "file6": { "3,申报主体要确保申报材料真实性、完整性，填报申报材料真实性声明_辅助证明文件上传": [] },
        "file7": { "4,运营主体的法人证书和营业执照副本(复印件)_资料上传": [] },
        "file8": { "4,运营主体的法人证书和营业执照副本(复印件)_辅助证明文件上传": [] },
        "file9": { "5,上一年度审计报告及服务收支情况的专项审计报告_资料上传": [] },
        "file10": { "5,上一年度审计报告及服务收支情况的专项审计报告_辅助证明文件上传": [] },
        "file11": { "6,土地、房屋的不动产权证书(或租赁合同)复印件。_资料上传": [] },
        "file12": { "6,土地、房屋的不动产权证书(或租赁合同)复印件。_辅助证明文件上传": [] },
        "file13": { "7,基地主要管理人员、服务人员和创业辅导师名单及相应的资质证明材料。_资料上传": [] },
        "file14": { "7,基地主要管理人员、服务人员和创业辅导师名单及相应的资质证明材料。_辅助证明文件上传": [] },
        "file15": { "8,基地典型服务案例_资料上传": [] },
        "file16": { "8,基地典型服务案例_辅助证明文件上传": [] },
        "file17": { "9,能够证明符合申报条件的其他材料_资料上传": [] },
        "file18": { "9,能够证明符合申报条件的其他材料_辅助证明文件上传": [] },
      },
      huixian: [],
      data: {
        userId: '',
        applicationType: '0',
        level: '0',
        dataType: '0'
      },
      huixianId:[],
      isshenbao:'',
      chexiao:[],
      level:null,
      type:null
    };
  },
  methods: {
    handleCommand(command){
      this.huixian[0].applicationLevel=command
    },
     //提交表单
     open(title,yijian) {
        this.$alert(yijian, title, {
          confirmButtonText: '确定'
        });
      },
    //取消申报
    quxiao() {
      this.chexiao= this.chexiao.join(',')
      repeal({id:this.chexiao}).then((res)=>{
        if(res.data.state=='20000'){
          this.$message({
          message: '撤销成功',
          type: 'success'
        });
        }else{
          this.$message.error(res.data.message);
        }
        
      })
    },
    uploadfile(rowname, type) {
      return { userId: this.$store.state.userId, name: rowname, type: type }
    },
    zancun() {
      console.log(this.fileList);
    },
    //提交表单
    submit(state) {
      const data = this.huixian.reduce((prev, next, index) => {
      const startIndex = index * 2;
        const dataName =(next.id+',')+ next.dataName.split(',').pop();
        prev[`file${startIndex + 1}`] = {
          [dataName + '_资料上传']: next?.fileNameList?.map(item => item.fileId) || [],
        }
        prev[`file${startIndex + 2}`] = {
          [dataName + '_辅助证明文件上传']: next?.axioyNameList?.map(item => item.fileId) || [],
        }
        return prev;
      }, {})
      data.userId = this.$store.state.userId;
      data.dataType = this.huixian[0].dataType;
      data.applicationId = this.huixian[0].applicationId;
      data.applicationType = 1
      data.pprovalStatus=state
      data.level= this.huixian[0].applicationLevel;
      jidi_reset(data).then((res) => {
        if (res.data.state == '20000') {
          this.$message({
            message: '提交成功',
            type: 'success',
          });
        } 
      })
    },
    download(row) {
      console.log(row);
      download({ fileId: '1657779828016836609' }).then((res) => {
        // console.log(JSON.parse(res.data.type));
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/vnd.ms-excel' }))
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.setAttribute("download", 'a.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        console.log(link);
      })
    },
    beforelod() {

    },
    //点击删除按钮
    handleRemove(file, fileList, row, flag) {
      console.log(file, fileList, row)
      if (flag ===1) {
        row.fileNameList = row.fileNameList.filter(item => {
          return item.fileId !== file.fileId;
        })
      } else if (flag === 2) {
        row.axioyNameList = row.axioyNameList.filter(item => {
          return item.fileId !== file.fileId;
        })
      }
    },
    //预览文件
    handlePreview(file) {
      console.log(file);
      upload_file({ fileId: file.fileId }).then((res) => {
        console.log(res);
        let url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }))

        window.open(url)
      })

    },
    //超出限制
    handleExceed() {
      this.$message.warning('每一项只能上传3个文件');
    },
    //点击移除的对话框
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    //上传成功的回调
    handleSuccess(response, file, fileList, row, name, type) {
      if (response && response.state == '20000') {
        console.log(response, file, fileList, row, name, type);
        if (type == '资料上传') {
          name = name + '_资料上传'
          console.log(row);
          row.fileNameList.push({
            fileId: response.data,
            ...file,
          })
          // for (var key in this.upload) {
          //   console.log(key);
          //   if (key.slice(4, 6) == (id * 2) - 1) {
          //     console.log(this.upload[key][name]);
          //     this.upload[key][name].push(response.data)
          //     // console.log( this.upload[key][name].push(response.data));
          //     console.log(this.upload);
          //   }
          // }
        } else if (type == '辅助证明文件上传') {
          name = name + '_辅助证明文件上传'
          row.axioyNameList.push({
            fileId: response.data,
            ...file,
          })
          // for (var keys in this.upload) {
          //   if (keys.slice(4, 6) == (id * 2)) {
          //     //  console.log(this.upload[keys]);
          //     this.upload[keys][name].push(response.data)
          //     // console.log( this.upload[key][name].push(response.data));
          //     console.log(this.upload);
          //   }
          // }
        }
        console.log(this.huixian);
      }
    },
  }, 
  filters: {
    flitt(name) {
      console.log(name);
      var name1=name.split(',')
      var name2=name1.shift()
      console.log(name2);
      return name1.toString() 
    }
  },
  created() {
    this.token = localStorage.getItem('token')
    this.uploadData.userId = this.$store.state.userId
    console.log(this.huixian);
    moban_list({ applicationType: 0 }).then((res) => {
      console.log(res);
    })
    shifan_detail({ userId: this.$store.state.userId, type:1 }).then((res) => {
      var dataLIst = res.data.data;
      console.log(dataLIst, res.data.data);
      dataLIst.forEach(item => {
        this.chexiao.push(item.id)
        item.dataName = item.dataName.split('_').shift()
        item.fileNameList = []
        item.axioyNameList = []
        if (item.uploadDataFileId.length > 0) {
          item.uploadDataFileId = item.uploadDataFileId.split(',')
          item.uploadDataFileId.forEach((items) => {
            getFileName({ fileId: items }).then((res1) => {
              let obj = {
                fileId: items,
                fileName: res1.data.data,
                name: res1.data.data,
              }
              // console.log(item.fileNameList);
              item.fileNameList.push(JSON.parse(JSON.stringify(obj)))

            })

          })
        } else {
          item.uploadDataFileId = []
        }
        if (item.uploadAuxiliaryFileId.length > 0) {
          item.uploadAuxiliaryFileId = item.uploadAuxiliaryFileId.split(',')
          item.uploadAuxiliaryFileId.forEach(items => {
            getFileName({ fileId: items }).then(res2 => {
              let obj = {
                fileId: items,
                fileName: res2.data.data,
                name: res2.data.data,
              }
              item.axioyNameList.push(JSON.parse(JSON.stringify(obj)))
            })
          })
        } else {
          item.uploadAuxiliaryFileId = []
        }
      })

      this.huixian = dataLIst
     this.level=this.huixian[0].applicationLevel
     this.type=this.$store.state.jdState
      // setTimeout(() => {
      //   for (let index = 0; index <dataLIst.length; index++) {
      //     if(dataLIst[index].fileNameList[0]){
      //       this.huixianId.push(dataLIst[index].fileNameList[0].fileId)
      //       console.log(this.huixianId);
      //     }
      //   }
      // }, 1000);
    })
    pingtai_Count({userId:this.$store.state.userId,type:'1'}).then((res)=>{
      this.isshenbao=res.data.data.pprovalStatus
    })
  },
  components: {
  }
}
</script>


<style scoped lang="scss"> 
.yijian{
  color: #2797E8;
  cursor: pointer;
}
.title2 {
     width: 100%;
     height: 40px;
     font-size: 18px;
     font-family: Microsoft YaHei;
     font-weight: bold;
     color: #1285D7;
     line-height: 40px;
     margin: 20px 0px;
     display: flex;
     
     div:nth-of-type(2){
        color: black;
        font-size: 16px;
        margin: 0px 20px;
     }
     div:nth-of-type(3){
        color: black;
        font-size: 15px;
     }
   }
.declareBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    margin: 30px auto;
    box-sizing: border-box;
    padding: 10px 50px;
 
    .title {
      display: flex;
 
      div:nth-of-type(1) {
        width: 120px;
        height: 50px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #262626;
        line-height: 50px;
        margin-bottom: 20px;
        border-bottom: 4px #1285D7 solid;
 
      }
 
      div:nth-of-type(2) {
        height: 50px;
        font-size: 15px;
        font-family: Arial;
        font-weight: 400;
        color: #DCDCDC;
        line-height: 50px;
        margin-right: 5px;
 
        border-bottom: 4px #1285D7 solid;
 
      }
 
      div:nth-of-type(3) {
        width: 189px;
        height: 50px;
        font-size: 15px;
        font-family: Arial;
        font-weight: 400;
        color: #DCDCDC;
        line-height: 50px;
 
        border-bottom: 4px #1285D7 solid;
 
      }
 
    }
 
    .title2 {
      width: 150px;
      height: 40px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1285D7;
    }
  }
 
  .fujian {
    width: 1136px;
    height: 55px;
    background: #EBF5FC;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
    line-height: 55px;
    margin: 10px 0px;
    padding-left: 20px;
    cursor: pointer;
  }
 
  .lianxi {
    display: flex;
    margin-bottom: 50px;
 
    div {
      width: 206px;
      height: 55px;
      background: #FAFAFA;
      border: 2px solid #EEEEEE;
      line-height: 55px;
      text-align: center;
    }
 
    div:nth-of-type(1) {
      width: 30%;
    }
  }
 
  .tableFoot {
    width: 100%;
    display: flex;
    justify-content: center;
 
    button {
      margin: 0px 10px;
 
      &:hover {
        cursor: pointer;
      }
    }
 
    button:nth-of-type(1) {
      width: 98px;
      height: 40px;
      background: #F39200;
      border: 0;
      border-radius: 3px 3px 3px 3px;
      color: white;
    }
 
    button:nth-of-type(2) {
      width: 98px;
      height: 40px;
      background: #2797E8;
      border-radius: 3px 3px 3px 3px;
      border: 0;
 
      color: white;
    }
 
    button:nth-of-type(3) {
      width: 98px;
      height: 40px;
      background: #FFFFFF;
      border-radius: 3px 3px 3px 3px;
      color: white;
      border: 0;
    }
  }
 
  .name {
    width: 208px;
    height: 45px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FD8544;
  }
 
  .text {
    cursor: pointer;
    color: #1285D7;
  }
 
  .iconDownload {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
  }
 
  .el-table__header {
    background-color: #1285D7 !important;
    color: white;
  }
 
  ::v-deep .el-table__header th.is-leaf,
  ::v-deep .el-table__header th.gutter {
    background-color: #1285D7 !important;
    color: white;
    font-size: 16px;
  }
 
  .status {
    width: 48px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D62502;
  }
 
  .el-button--primary {
    background-color: #fd8544;
    border-color: #fd8544;
  }
 </style>